<!--
Copyright 2018 Google LLC. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================
-->

<html>
  <head>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-teal.min.css" />
  </head>

  <body>

  <style>
    #app-status {
      color: blue;
      font-family: monospace;
      font-size: 150%;
      padding-bottom: 1em;
    }
    #cart-pole-canvas {
      display: none;
    }
    button {
      font-size: 105%;
      min-width: 120px;
    }
    input {
      font-family: monospace;
      width: 200px;
    }
    .input-div {
      padding: 5px;
      font-family: monospace;
    }
    .input-label {
      display: inline-block;
      width: 15em;
    }
    .canvases {
      display: inline-block;
    }
    .horizontal-sections {
      display: inline-block;
      padding-left: 0px;
      padding-right: 10px;
      padding-top: 10px;
      padding-bottom: 10px;
      margin: 5px;
      vertical-align: top;
      border: 1px #AAA solid;
    }
    .status-span {
      display: inline-block;
      width: 150px;
    }
    .buttons-section {
      float: right;
    }
    input :disabled {
      background-color: #AAA,
    }
  </style>

  <body>
    <h1>TensorFlow.js Example:<br/>Reinforcement Learning: Cart Pole </h1>

    <div>
      <div>
        <span id="app-status">Standing by.</span>
      </div>

      <div>
        <canvas id="cart-pole-canvas" height="150px" width="500px"></canvas>
      </div>

      <div>
        <div class="horizontal-sections">
          <div class="input-div">
            <span class="input-label">Locally-stored network</span>
            <input id="stored-model-status" value="N/A" disabled="true" readonly="true"></input>
            <button id="delete-stored-model" disabled="true">Delete</button>
          </div>

          <div class="horizontal-sections">
            <div class="input-div">
              <span class="input-label">Hidden layer size(s) (e.g.: "5", "8,6"):</span>
              <input id="hidden-layer-sizes" value="4"></input>
              <button id="create-model" disabled="true">Create model</button>
            </div>
          </div>

          <div class="input-div">
            <span class="input-label">Number of iterations:</span>
            <input id="num-iterations" value="20"></input>
          </div>
          <div class="input-div">
            <span class="input-label">Games per iteration:</span>
            <input id="games-per-iteration" value="20"></input>
          </div>
          <div class="input-div">
            <span class="input-label">Max. steps per game:</span>
            <input id="max-steps-per-game" value="500"></input>
          </div>
          <div class="input-div">
            <span class="input-label">Reward discount rate:</span>
            <input id="discount-rate" value="0.95"></input>
          </div>
          <div class="input-div">
            <span class="input-label">Learning rate:</span>
            <input id="learning-rate" value="0.05"></input>
          </div>
          <div class="input-div">
            <span class="input-label">Render during training:</span>
            <input type="checkbox" id="render-during-training" />
          </div>
          <div class="buttons-section">
            <button id="train" disabled="true">Train</button>
            <button id="test" disabled="true">Test</button>
          </div>
        </div>

        <div class="horizontal-sections">
          <div>
            <span id="iteration-status" class="status-span"></span>
            <progress value="0" max="100" id="iteration-progress"></progress>
          </div>
          <div>
            <span id="train-status" class="status-span"></span>
            <progress value="0" max="100" id="train-progress"></progress>
          </div>
          <div>
            <span class="status-span">Training speed:</span>
            <span id="train-speed" class="status-span"></span>
          </div>
          <div class="canvases" id="steps-canvas"></div>
        </div>
      </div>
    </div>

    <script src="index.js"></script>
  </body>
</html>
